<template>
  <div id="TiQianPiList">
    <div
      style="
        position: fixed;
        z-index: 99;
        width: 860px;
        top: 130px;
        border-top: 1px solid #e8e8e8;
      "
    >
      <div class="cata-title f12">
        所属目录：<span v-show="parentListName">{{ parentListName }}></span>
        <span>{{ domTitle }}</span>
      </div>
      <div
        class="pre-tr pre-head-tr text-center fw600 f14 pre-gaokao df"
        style="
          color: #86909c !important;
          border-left: 1px solid #ebeef5;
          border-bottom: 1px solid #ebeef5;
        "
      >
        <div class="pre-td pre-td-code nborderbo">代码</div>
        <div class="pre-td pre-td-name nborderbo">院校/专业名称</div>
        <div class="pre-td pre-td-plan nborderbo">计划</div>
        <div class="pre-td pre-td-cose nborderbo">学费</div>
        <div class="pre-td pre-td-year nborderbo">学制</div>
        <div class="pre-td pre-td-choosesubject nborderbo">选科</div>
      </div>
    </div>

    <!-- 悬浮动态title -->
    <div
      v-show="isShow"
      class="df f12 font-weight-bold"
      style="
        align-items: normal;
        background: rgb(250, 250, 250);
        height: 48px;
        width: 860px;
        position: fixed;
        top: 200px;
      "
    >
      <div class="pre-td pre-td-code flex-center">
        <div>{{ number }}</div>
      </div>

      <div
        class="pre-td pre-td-name"
        style="
          display: flex;
          flex-direction: column-reverse;
          justify-content: center;
        "
      >
        <div class="f14">{{ school }}</div>
      </div>

      <div class="pre-td pre-td-plan flex-center">
        <!-- <div>{{ item.collegeName }}</div> -->
        <div class="">{{ number2 }}</div>
      </div>

      <div
        @click="handleLineTitle"
        class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center curr"
      >
        <img src="../../../../assets/images/tiqianpi-search-flag.png" alt="" />
        <span style="text-decoration: underline"> 历年分数 </span>
      </div>

      <div class="pre-td pre-td-plan flex-center">
        <div class="">{{ subject }}</div>
      </div>
    </div>

    <!-- list -->
    <div class="list-contaier f12" v-if="tiqianpiListData.length">
      <div
        v-for="(item, index) in tiqianpiListData"
        :key="item.tb_id"
        :class="'title' + index"
      >
        <!-- 标题 -->
        <div
          id="L"
          class="pre-td pre-td-title text-center text-666 f18 fw600"
          v-if="item.dataType == 'L'"
        >
          <div class="cntext">{{ item.title }}</div>
        </div>
        <!-- 大学 -->
        <div
          v-else-if="item.dataType == 'U'"
          id="U"
          class="df f12 font-weight-bold"
          style="
            align-items: normal;
            background: rgb(250, 250, 250);
            height: 98px;
          "
        >
          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.collegeEnrollCode }}</div>
          </div>

          <div
            class="pre-td pre-td-name"
            style="
              display: flex;
              flex-direction: column-reverse;
              justify-content: center;
            "
          >
            <div class="f12" style="color: #999">{{ item.remark }}</div>
            <div class="f14">{{ item.collegeName }}</div>
          </div>

          <div class="pre-td pre-td-plan flex-center">
            <!-- <div>{{ item.collegeName }}</div> -->
            <div class="">{{ item.planNum }}</div>
          </div>

          <div
            class="pre-td pre-td-text text-center fw600 f12 pt40 pb40 flex-center"
          >
            <img
              src="../../../../assets/images/tiqianpi-search-flag.png"
              alt=""
            />
            <a
              style="text-decoration: underline"
              class="curr"
              @click="handleLinianLine(item)"
            >
              历年分数
            </a>
          </div>

          <div class="pre-td pre-td-plan flex-center">
            <div class="">
              {{ item.chooseSubject ? item.chooseSubject : '-' }}
            </div>
          </div>
        </div>

        <!-- 专业 -->
        <div
          v-else-if="item.dataType == 'M'"
          class="df f12 font-weight-bold"
          style="align-items: normal"
        >
          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.professionEnrollCode }}</div>
          </div>

          <div
            class="pre-td pre-td-name"
            style="display: flex; flex-direction: column-reverse"
          >
            <div class="f12" style="color: #999">{{ item.remark }}</div>
            <div class="f14" style="margin-bottom: 10px">
              {{ item.majorName }}
            </div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.planNum ? item.planNum : '-' }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.cost }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.learnYearText }}</div>
          </div>

          <div class="pre-td pre-td-code flex-center">
            <div>{{ item.chooseSubject ? item.chooseSubject : '-' }}</div>
          </div>
        </div>
        <!-- 信息 -->
        <div class="tiqianpi-i-view" v-else-if="item.dataType == 'I'">
          <div style="margin: 20px 0 0 10px">{{ item.title }}</div>
        </div>
      </div>
      <div v-if="isAllData" class="isAllData">已展示所有数据</div>
    </div>
    <div v-else class="nodata">暂无数据</div>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const emits = defineEmits(['updateScroll', 'setCurrentNodeKey']);
const isShow = ref(false);
const { tiqianpiListData, isAllData } = defineProps({
  tiqianpiListData: {
    type: Array,
    default: () => [],
  },
  isAllData: {
    type: Boolean,
    default: false,
  },
});
const domTitle = ref('');
const handleIsShow = (scroll) => {
  let elemntDOMS = document.querySelectorAll('#U');
  // 获取标题DOM内容
  let titleDOMS = document.querySelectorAll('#L');
  if (scroll >= 51) {
    isShow.value = true;
  } else if (scroll == 0) {
    isShow.value = false;
  }
  let resDOM = '';
  elemntDOMS.forEach((v, i) => {
    if (scroll + 109 >= elemntDOMS[i].offsetTop) {
      resDOM = elemntDOMS[i].innerText;
      handleSplitStr(resDOM);
    }
  });
  // 获取目录标题
  titleDOMS.forEach((v, i) => {
    if (scroll + 60 >= titleDOMS[i].offsetTop) {
      domTitle.value = titleDOMS[i].textContent;
    }
  });
  emits('setCurrentNodeKey', domTitle.value);
};

const number = ref(0);
const school = ref('');
const number2 = ref('');
const subject = ref('');
const handleSplitStr = (str) => {
  let strResult = str.split('\n');
  number.value = strResult[0];
  school.value = strResult[2];
  number2.value = strResult[3];
  subject.value = strResult[5];
};

const handleCilckTree = (type) => {
  nextTick(() => {
    // 获取标题DOM内容
    let titleDOMS = document.getElementById('L');
    if (titleDOMS) {
      emits('updateScroll', titleDOMS.offsetTop, type);
    } else {
      emits('updateScroll', 0, type);
    }
  });
};
const handleLineTitle = () => {
  window.open(
    router.resolve('/college/tiqianpiScoreline?collegecode=' + number.value)
      .href,
    '_blank',
  );
};
const handleLinianLine = (item) => {
  window.open(
    router.resolve('/college/tiqianpiScoreline?collegecode=' + item.collegeCode)
      .href,
    '_blank',
  );
};
const parentListName = ref('');
const handleSetDomTitle = (title, parentName) => {
  domTitle.value = title;
  if (parentName) {
    parentListName.value = parentName;
  }
};
defineExpose({
  handleIsShow,
  handleSetDomTitle,
  handleCilckTree,
});
</script>

<style scoped lang="scss">
#TiQianPiList {
  padding-left: 320px;
  margin-left: 20px;
  // width: 860px;
  height: 100%;
  .list-contaier {
    border: 1px solid #e8e8e8;
    margin-top: 70px;
    padding-bottom: 150px;
    width: 860px !important;
  }
  .cata-title {
    padding: 5px 12px;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    background: #fff;
  }
  .pre-head-tr {
    background: #fff;
    // border-left: 1px solid #ebeef5;
    color: #86909c !important;
  }

  .pre-tr {
    font-size: 14px;
    display: flex;
    // border-right: 1px solid #ebeef5;
  }

  .pre-td {
    // padding: 8px 5px;
    padding: 10px 5px 10px 10px;
    min-height: 36px;
    border: none;
    // border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }

  .pre-td-code {
    width: 10%;
  }

  .pre-td-choose,
  .pre-td-cose,
  .pre-td-plan,
  .pre-td-year {
    width: 10%;
  }

  .pre-td-choosesubject {
    width: 10%;
  }

  .pre-td-name {
    width: 50%;
  }
  .pre-td-title {
    width: 100%;
    padding: 11px 5px;
  }
  .flex-center,
  .flex-column-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pre-td-text {
    width: 20%;
  }
}
img {
  width: 15px;
  margin-right: 5px;
}
/* 信息 */
.tiqianpi-i-view {
  background-color: white;
  color: #666666;
  // font-size: 24px;
  font-weight: 400;
}
// .title1{
//   position: sticky;
//   top: 100px;
//   left: 0;
// }
.nborderbo {
  border-bottom: none !important;
}
:deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}
.nodata {
  margin-top: 200px;
  text-align: center;
  width: 860px;
  font-size: 14px;
  color: #666666;
}
.isAllData {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 20px;
}
</style>
